<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ name: '/AllShopping' }"
        >全部商品</el-breadcrumb-item
      >
      <el-breadcrumb-item>分类</el-breadcrumb-item>
      <el-breadcrumb-item>手机</el-breadcrumb-item>
    </el-breadcrumb>

    <h4>分类</h4>

    <el-tabs class="types" type="card">
      <el-tab-pane label="手机" name="mobilePhone"></el-tab-pane>
      <el-tab-pane label="空调" name="second"></el-tab-pane>
      <el-tab-pane label="电冰箱" name="third"></el-tab-pane>
      <el-tab-pane label="风扇" name="fourth"></el-tab-pane>
    </el-tabs>

    <el-container class="container">
      <!-- 商品推荐 -->
      <el-row class="form2">
        <el-col class="one">
          <img
            src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png"
            alt=""
          />
          <h2 class="name">Redmi K30</h2>
          <h3 class="describe">120hz流速屏，全速热爱</h3>
          <p class="money"><el-link type="warning">1599</el-link></p>
        </el-col>

        <el-col class="two">
          <img
            src="http://106.15.179.105:3000/public/imgs/appliance/AirCondition-F3W1.png"
            alt=""
          />
          <h2 class="name">变频空调</h2>
          <h3 class="describe">静音制冷，解暑神器</h3>
          <p class="money"><el-link type="warning">2699</el-link></p>
        </el-col>

        <el-col class="three">
          <img
            src="http://106.15.179.105:3000/public/imgs/appliance/Washer-Pro-10.png"
            alt=""
          />
          <h2 class="name">全自动互联网洗衣机</h2>
          <h3 class="describe">智能洗烘一体，省心更省力</h3>
          <p class="money"><el-link type="warning">2999</el-link></p>
        </el-col>

        <el-col class="four">
          <img
            src="http://106.15.179.105:3000/public/imgs/appliance/MiTv-E55A.png"
            alt=""
          />
          <h2 class="name">全面屏电视</h2>
          <h3 class="describe">全面屏设计，人工智能语音</h3>
          <p class="money"><el-link type="warning">1599</el-link></p>
        </el-col>

        <el-col class="five">
          <img
            src="http://106.15.179.105:3000/public/imgs/phone/Redmi-8A.png"
            alt=""
          />
          <h2 class="name">Redmi 8A</h2>
          <h3 class="describe">超长续航，性价比之王</h3>
          <p class="money"><el-link type="warning">599</el-link></p>
        </el-col>

        <el-col class="six">
          <img
            src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png"
            alt=""
          />
          <h2 class="name">Redmi K30</h2>
          <h3 class="describe">120hz流速屏，全速热爱</h3>
          <p class="money"><el-link type="warning">1599</el-link></p>
        </el-col>

        <el-col class="seven">
          <img
            src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png"
            alt=""
          />
          <h2 class="name">Redmi K30</h2>
          <h3 class="describe">120hz流速屏，全速热爱</h3>
          <p class="money"><el-link type="warning">1599</el-link></p>
        </el-col>

        <el-col class="six">
          <img
            src="http://106.15.179.105:3000/public/imgs/phone/Redmi-k30.png"
            alt=""
          />
          <h2 class="name">Redmi K30</h2>
          <h3 class="describe">120hz流速屏，全速热爱</h3>
          <p class="money"><el-link type="warning">1599</el-link></p>
        </el-col>
      </el-row>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fits: ["fill"],
      url: "http://106.15.179.105:3000/public/imgs/phone/phone.png",
    };
  },
};
</script>

<style>
.el-breadcrumb {
  margin-top: 25px;
  margin-left: 119px;
}
.types {
  margin-top: 20px;
  margin-left: 110px;
  height: 41.5px;
}
h4 {
  width: 50px;
  float: left;
  margin-top: 27px;
  margin-left: 116px;
}
.el-row {
  background-color: rgba(241, 238, 238, 0.596) !important;
  height: 1360px;
}
.type {
  font-size: 25px;
  margin-left: 110px;
  color: rgba(5, 13, 90, 0.616);
}
.form2 {
  padding-left: 100px;
}
.form2 img {
  width: 210px !important;
  border: none !important;
}
.form2 :hover {
  border: 0.9px solid #868484;
}
.el-col {
  width: 220px !important;
  height: 320px;
  margin-left: 13px;
  margin-top: 10px;
  border: 0.9px solid #f0f0f0;
}

.name {
  font-size: 16px;
  border: none !important;
}
.name,
.describe {
  font-weight: 400;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: none !important;
}
.describe {
  margin: 5px 10px;
  height: 18px;
  font-size: 12px;
  color: #b0b0b0;
  border: none !important;
}
.money {
  margin: 10px 10px 10px;
  text-align: center;
  border: none !important;
}
.money a {
  border: none !important;
}
.money .el-link {
  font-size: 20px;
}
.money a :hover {
  border: none !important;
}
</style>
